<template>
  <div>
    <h2>添加</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>头像</td>
          <td>
            <input type="file" @change="upimg"/>
            <img :src="start.Imgs" width="100" height="100" />
          </td>
          <td>民族</td>
          <td><input type="text" v-model="start.Nation"/></td>
        </tr>
        <tr>
          <td>楼栋</td>
          <td><input type="text" v-model="start.Area"/></td>
          <td>籍贯</td>
          <td><input type="text" v-model="start.Where"/></td>
        </tr>
        <tr>
          <td>房间号</td>
          <td>
            <select v-model="start.Housenumber">
              <option value="请选择">请选择</option>
              <option value="201">201</option>
              <option value="202">202</option>
              <option value="203">203</option>
              <option value="204">204</option>
              <option value="205">205</option>
              <option value="206">206</option>
            </select>
          </td>
          <td>证件</td>
          <td><input type="text" v-model="start.Card"/></td>
        </tr>
        <tr>
          <td>姓名</td>
          <td><input type="text" v-model="start.Name"/></td>
          <td>电话</td>
          <td><input type="text" v-model="start.Phone"/></td>
        </tr>
        <tr>
          <td>性别</td>
          <td>
            <input type="radio" name="sex" :value="false" v-model="start.Sex"/>男
            <input type="radio" name="sex" :value="true" v-model="start.Sex"/>女
          </td>
          <td>业主</td>
          <td>
            <select v-model="start.Type">
              <option value="0">请选择</option>
              <option value="1">业主</option>
              <option value="2">租客</option>
            </select>
          </td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <input type="button" value="取消" />
            <input type="button" value="确定" @click="ok"/>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

let data: any = reactive({
  start: {
    Imgs:'',
    Area:'',
    Housenumber:"请选择",
    Name:'',
    Sex:false,
    Nation:'',
    Where:'',
    Phone:'',
    Card:'',
    Type:'',
  }
});

let {start}=toRefs(data);

const upimg=(e:any)=>{
  let f=new FormData();
  let obj=e.target.files[0];
  f.append('file',obj)

  axios({
    url:"/api/one/upimg",
    method:'post',
    data:f
  }).then((res)=>{
    console.log(res)
    if(res.data.code==1){
        alert(res.data.msg)
        return;
    }
    if(res.data.code==2){
        alert(res.data.msg)
        return;
    }
    start.value.Imgs="https://localhost:7200"+res.data.data;
  }).catch((err)=>{
    console.log(err)
  })
}


const ok=()=>{

  if(start.value.Area==""){
      alert('楼栋不能为空')
      return;
  }
  if(start.value.Housenumber=="请选择"){
      alert('房间号不能为请选择')
      return;
  }
  if(start.value.Name==""){
      alert('姓名不能为空')
      return;
  }
  let a=/^1[3-9]\d{9}$/;
  if(a.test(start.value.Phone)==false){
      alert('请输入正确手机格式');
      return;
  }
  let b=/^\d{17}[0-9xX]$/;
  if(b.test(start.value.Card)==false){
      alert('请输入正确的身份证格式');
      return;
  }
  let obj={
    Imgs:start.value.Imgs,
    Area:start.value.Area,
    Housenumber:start.value.Housenumber,
    Name:start.value.Name,
    Sex:start.value.Sex,
    Nation:start.value.Nation,
    Where:start.value.Where,
    Phone:start.value.Phone,
    Card:start.value.Card,
    Type:start.value.Type,
  }

  axios({
    url:'/api/one/add',
    method:'post',
    data:obj
  }).then((res)=>{
    console.log(res)
    if(res.data.data>0){
      alert("成功")
      router.push("/show")
    }
    else
    {
      alert('失败')
      return;
    }
  }).catch((err)=>{
    console.log(err)
  })
}
</script>

<style scoped></style>
